import React, { Component } from 'react';

import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  Select,
  DatePicker,
  Table,
  Space,
  Tag,
} from 'antd';
import { Link } from 'react-router-dom';
import { getChannels } from 'api/channel';
import { getArticles } from 'api/articles';
import defaultImg from 'assets/error.png';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';

const { RangePicker } = DatePicker;
const { Option } = Select;
export default class ArticleList extends Component {
  state = {
    channels: [],
    articles: [],
    currentPage: 1,
    pageSize: 10,
    total: 0,
  };
  // //   获取频道
  // async getChannelList() {
  //   const res = await getChannels();
  //   // console.log(23, res);
  //   this.setState({ channels: res.data.channels });
  // }
  //   获取文章列表
  async getArticlesList() {
    const res = await getArticles();
    console.log(40, res);
    this.setState({ articles: res.data.results, total: res.data.total_count });
  }
  componentDidMount() {
    this.getChannelList();
    this.getArticlesList();
  }
  //   点击筛选，渲染对应的列表
  onFinish = async (values) => {
    console.log(values);
    const params = {};
    // 处理状态
    if (values.status !== -1) {
      params.status = values.status;
    }
    // 处理频道
    if (values.channel) {
      params.channel_id = values.channel;
    }
    // 处理日期
    if (values.date) {
      params.begin_pubdate = values.date[0]
        .startOf('day')
        .format('YYYY-MM-DD HH:mm:ss');
      params.end_pubdate = values.date[1]
        .endOf('day')
        .format('YYYY-MM-DD HH:mm:ss');
    }
    params.page = 1;
    // console.log(params);
    this.params = params;
    const res = await getArticles(params);
    console.log(67, res);
    this.setState({ articles: res.data.results, currentPage: 1 });
  };
  //   切换分页
  changePage = async (page, pageSize) => {
    // console.log(pageSize);
    console.log(77, pageSize);
    const res = await getArticles({
      ...this.params,
      page,
      per_page: pageSize,
    });
    // console.log(59, res);
    this.setState({
      currentPage: page,
      pageSize,
      articles: res.data.results,
    });
  };
  render() {
    const articleStatus = [
      { id: -1, name: '全部', color: 'magenta' },
      { id: 0, name: '草稿', color: 'orange' },
      { id: 1, name: '待审核', color: 'red' },
      { id: 2, name: '审核通过', color: 'green' },
      { id: 3, name: '审核失败', color: 'cyan' },
    ];
    const columns = [
      {
        title: '封面',
        render(item) {
          return (
            <img
              src={item.cover.type === 0 ? defaultImg : item.cover.images[0]}
              //   src={defaultImg}
              alt={item.title}
              title={item.title}
              style={{ width: 100, height: 60, objectFit: 'cover' }}
            />
          );
        },
      },
      {
        title: '标题',
        dataIndex: 'title',
      },

      {
        title: '状态',
        dataIndex: 'status',
        render: (status) => {
          //   console.log(80, status);
          const tagInfo = articleStatus.find((item) => item.id === status);
          return <Tag color={tagInfo.color}>{tagInfo.name}</Tag>;
        },
      },
      {
        title: '发布时间',
        dataIndex: 'pubdate',
      },
      {
        title: '阅读数',
        dataIndex: 'read_count',
      },
      {
        title: '评论数',
        dataIndex: 'comment_count',
      },
      {
        title: '点赞数',
        dataIndex: 'like_count',
      },
      {
        title: '操作',
        render() {
          return (
            <Space>
              <Button
                type="primary"
                shape="circle"
                icon={<EditOutlined />}
              ></Button>
              <Button
                type="primary"
                shape="circle"
                danger
                icon={<DeleteOutlined />}
              ></Button>
            </Space>
          );
        },
      },
    ];

    return (
      <div className="root">
        <Card
          title={
            <Breadcrumb>
              <Breadcrumb.Item>
                <Link to="/home">首页</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>文章列表</Breadcrumb.Item>
            </Breadcrumb>
          }
        >
          <Form initialValues={{ status: -1 }} onFinish={this.onFinish}>
            <Form.Item label="状态" name="status">
              <Radio.Group>
                <Radio value={-1}>全部</Radio>
                <Radio value={0}>草稿</Radio>
                <Radio value={1}>待审核</Radio>
                <Radio value={2}>审核通过</Radio>
                <Radio value={3}>审核失败</Radio>
              </Radio.Group>
            </Form.Item>

            <Form.Item label="频道" name="channel">
              <Select placeholder="请选择频道" style={{ width: 200 }}>
                {this.state.channels.map((item) => {
                  return (
                    <Option value={item.id} key={item.id}>
                      {item.name}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>

            <Form.Item label="日期" name="date">
              <RangePicker />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit">
                筛选
              </Button>
            </Form.Item>
          </Form>
          <div className="articleList">
            <Card title={`根据筛选条件共查询到${this.state.total}条数据`}>
              <Table
                rowKey="id"
                dataSource={this.state.articles}
                columns={columns}
                pagination={{
                  position: ['bottomCenter'],
                  current: this.state.currentPage,
                  pageSize: this.state.pageSize,
                  total: this.state.total,
                  onChange: this.changePage,
                }}
              />
            </Card>
          </div>
        </Card>
      </div>
    );
  }
}
